<template>
  <div class="" id="notice">
     
      <el-row >
          <el-col :span="22" :offset="1">
              <div class="permission-content ">
                <el-form  :inline="true" ref="form" :model="formData" label-width="70px">
                   
                   <el-form-item  label="公告标题">
                    <el-input v-model="formData.title" ></el-input>
                   </el-form-item>
                   <el-form-item  label="公告内容">
                     <el-input v-model="formData.content" ></el-input>
                   </el-form-item>
                </el-form>
               </div>
          </el-col>
          <el-col :span="3" :offset="18">
            <el-button v-preventReClick type="primary" @click="getNotice" >查询</el-button>
            <el-button v-preventReClick type="primary" @click="(dialogForm=true)">添加</el-button>
          </el-col>
      </el-row>
      <el-row>
         <el-col :span="22" :offset="1">
              <div class="permission-content bg-purple user-table">
                  <el-table
                  :data="tableData"
                  :cell-style="tableCellStyle"
                  empty-text="暂无数据"
                  
                  border
                  style="width: 100%">
                   <el-table-column
                   align="center"
                    prop="id"
                    label="编号"
                   >
                  </el-table-column>
                  <el-table-column
                  align="center"
                    prop="title"
                    label="公告标题"
                    width="100"
                   >
                  </el-table-column>
               
                  <el-table-column
                  align="center"
                    prop="content"
                    
                    label="公告内容"
                    
                   >
                  
                  </el-table-column>
                  <el-table-column
                  align="center"
                    prop="status"
                    label="状态"
                    width="100"
                   >
                   <template slot-scope="scope">
                      {{basic.noticeStatus&&basic.noticeStatus[scope.row.status]}}
                    </template>
                  </el-table-column>
                  <el-table-column
                  align="center"
                    prop="createdate"
                    label="创建时间"
                   >
                  </el-table-column>
                  <el-table-column
                        fixed="right"
                        label="操作"
                        width="150">
                        <template slot-scope="scope">
                           <el-button @click="dialogForm=true;showNotice=false" type="text" size="small">查看</el-button> 
                           <el-button @click="sendMsg(scope.row)" type="text" size="small">重新发布</el-button> 
                          <el-button v-preventReClick v-show="isAdmin" @click="delClick(scope.row)" type="text" size="small">删除</el-button>

                        </template>
                    </el-table-column>
                </el-table>
                <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getNotice" />
              </div>
          </el-col>
      </el-row>
      <el-dialog title="添加公告" :visible.sync="dialogForm">
        <div v-if="showNotice">
          <el-form :rules="rules" :model="insertForm" ref="insertFormBox">
          <el-form-item prop="title" label="公告标题" :label-width="formLabelWidth">
            
            <el-input v-model="insertForm.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="content" label="公告内容" :label-width="formLabelWidth">
            <el-input v-model="insertForm.content" type="textarea" :rows="3" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="status" label="公告状态" :label-width="formLabelWidth">
            <el-radio v-model="insertForm.status" label="0">正常</el-radio>
        <el-radio v-model="insertForm.status" label="1">关闭</el-radio>
          </el-form-item>
          
        </el-form>
        </div>
        <div v-else>
          <el-form :rules="rules" :model="insertForm" ref="insertFormBox">
          <el-form-item prop="title" label="公告标题" :label-width="formLabelWidth">
            {{insertForm.title}}
          </el-form-item>
          <el-form-item prop="content" label="公告内容" :label-width="formLabelWidth">
            {{insertForm.content}}
          </el-form-item>
          <el-form-item prop="status" label="公告状态" :label-width="formLabelWidth">
            {{basic.noticeStatusarr&&basic.noticeStatusarr[insertForm.status]}}
          </el-form-item>
          
        </el-form>
        </div>
        
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogForm = false;resetForm('insertFormBox')">取 消</el-button>
    <el-button type="primary" @click="insertNotice">确 定</el-button>
  </div>
</el-dialog>
  </div>
</template>
<script>
// import { defineComponent } from '@vue/composition-api'
import { getNotice,editNotice,insertNotice,delNotice} from '@/api/notice'
import { mapState } from 'vuex'
import { mapGetters } from 'vuex'
import { disposeDict } from '@/utils/dicts'
import Pagination from '@/components/Pagination'
export default {
components: { Pagination },
  data() {
    return{
        text:"测试",
        tableData:[],
        total:0,
        insertForm:{

        },
        formLabelWidth: '120px',
        isAdmin:this.$store.state.user.role=='admin'?true:false,
        dialogForm:false,
        showNotice:true,
        listQuery: {
          page: 1,
          limit: 10,
          importance: undefined,
          title: undefined,
          type: undefined,
          sort: '+id'
        },
        rules:[],
        formData:{},
        basic:{
          grade:disposeDict('grade','arr'),
          selGrade:disposeDict('grade','obj'),
          noticeStatus:disposeDict('noticeStatus','obj'),
          noticeStatusarr:disposeDict('noticeStatus','arr'),

        },
        userMessage:{},
        listQuery: {
        page: 1,
        limit: 10,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
      },
        dialogVisible:false
    }  
  },
  created(){
   this.getNotice()
   
  },
  mounted(){
  },
   computed:
   {
    
      // ...mapState(['basic'])
   },
  methods:{
    getNotice(){
    const listQuery=this.listQuery
    const formData=this.formData

      getNotice({listQuery,formData}).then(res=>{
    this.tableData=res.data.items
    this.total=res.data.total
    console.log(res)
   })
    },
  
    insertNotice(){
      let insertForm=this.insertForm
      console.log(insertForm)
      insertNotice(insertForm).then(res=>{
    this.getNotice()
    this.dialogForm=false
    this.sendMsg(insertForm)
    this.resetForm('insertFormBox')
    console.log(res)
   })
    },
    sendMsg(data) {
                //向服务端发送消息
                this.$io.emit('sendNotice', { data })

                
            },
    resetForm(formName) {
        this.$refs[formName].resetFields();
      },
     // 改变某一列单元格背景颜色
  tableCellStyle({ row, column, rowIndex, columnIndex }) {
    // console.log(row); // 基本都在这里面  其余的可自行打印
      // 这里写逻辑判断(看你是什么需求)
      // columnIndex === 2表示第三列
      if (columnIndex === 2) {
      // row.row.xxx代表你想改变单元格颜色的那个渲染值 可以根据状态给不同的颜色 比如 非常紧急 就给红色背景
      if(row.Grade == 1){
           return 'background:red;color:black ;'
      }else if(row.Grade == 2){
              return 'background:yellow;color:black;'
         }
      }
  },
    //查看详情
    handleClick(data){
      data.edit=true
      this.$router.push({
        path:'facMaintain',
        name:'facMaintain',
        params:data
      })
    },
    //删除公告
     delClick(data){
     delNotice(data).then(res=>{
       this.$message({ 
        message: '删除成功',
        type: 'success'
      });
      this.getNotice()
     })
     
    },
    //关闭弹出框
    handleClose(){
      this.dialogVisible = false
    }
    
  }
}
</script>
<style lang='scss' scoped>
#notice {
  padding: 20px 0;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.permission-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

</style>